<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Markdown智能排版</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
    
    <!-- Utility functions -->
    <script type="text/javascript" src="utils.js"></script>
</head>

<body class="ms-font-m ms-welcome ms-Fabric">
    <header class="ms-welcome__header ms-bgColor-neutralLighter">
        <img width="90" height="90" src="assets/logo-filled.svg" alt="Markdown智能排版" title="Markdown智能排版" />
        <h1 class="ms-font-su ms-fontWeight-light ms-fontColor-neutralPrimary">Markdown智能排版</h1>
    </header>
    
    <section id="sideload-msg" class="ms-welcome__main">
        <h2 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-neutralPrimary ms-u-marginBottom-20">
            请旁加载您的加载项以查看应用功能。
        </h2>
    </section>

    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <div class="padding">
            <!-- Markdown输入区域 -->
            <div class="ms-Grid">
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-sm12">
                        <label class="ms-Label">Markdown 内容:</label>
                        <textarea id="markdownInput" class="ms-TextField-field" rows="8" placeholder="请输入您的 Markdown 内容...
例如:
# 这是一级标题
## 这是二级标题
这是普通段落文本。

**这是加粗文本** *这是斜体文本*"></textarea>
                    </div>
                </div>
            </div>

            <!-- 排版规则输入区域 -->
            <div class="ms-Grid ms-u-marginTop-20">
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-sm12">
                        <label class="ms-Label">排版规则:</label>
                        <textarea id="styleRulesInput" class="ms-TextField-field" rows="12" placeholder="请输入排版规则...">[默认设置]
字体名称: Calibri
字体大小: 11pt
行距: 1.5
段前间距: 0pt
段后间距: 6pt

[标题一]
基于: 默认设置
字体名称: 宋体
字体大小: 小一号
加粗: 是
对齐方式: 居中
段前间距: 1行
段后间距: 12pt

[标题二]
基于: 默认设置
字体名称: 黑体
字体大小: 三号
加粗: 是
段前间距: 18pt
段后间距: 6pt

[正文]
基于: 默认设置
字体名称: 宋体
字体大小: 小四号
首行缩进: 2字符
对齐方式: 两端对齐
行距: 1.25倍</textarea>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="ms-Grid ms-u-marginTop-20">
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-sm12">
                        <button id="processButton" class="ms-Button ms-Button--primary">
                            <span class="ms-Button-label">格式化并插入内容</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 状态消息区域 -->
            <div class="ms-Grid ms-u-marginTop-20">
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-sm12">
                        <div id="statusMessage" class="status-message"></div>
                    </div>
                </div>
            </div>

            <!-- 示例和帮助 -->
            <div class="ms-Grid ms-u-marginTop-30">
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-sm12">
                        <details class="help-section">
                            <summary class="help-title">帮助和示例</summary>
                            <div class="help-content">
                                <h4>支持的 Markdown 元素:</h4>
                                <ul>
                                    <li># 标题一 (H1)</li>
                                    <li>## 标题二 (H2)</li>
                                    <li>### 标题三 (H3)</li>
                                    <li>普通段落</li>
                                    <li>**加粗文本**</li>
                                    <li>*斜体文本*</li>
                                </ul>
                                
                                <h4>排版规则说明:</h4>
                                <ul>
                                    <li>使用 [节名称] 定义样式</li>
                                    <li>支持 "基于" 继承其他样式</li>
                                    <li>字体大小: 支持磅值(12pt)和中文号数(小四号)</li>
                                    <li>缩进: 支持字符单位(2字符)</li>
                                    <li>间距: 支持磅值(12pt)和行单位(1行)</li>
                                </ul>
                            </div>
                        </details>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script type="text/javascript" src="taskpane.js"></script>
</body>
</html>
